<template>

	<gui-page :customHeader="true">
		<template v-slot:gBody>
			<Head :headBack="head_back" :showPopup="showPopup" @search="search"></Head>
			<scroll-view scroll-y="true" @scroll="scroll" @scrolltoupper="scrolltoupper" style="padding-top: 100rpx;" :style="{'margin-top':head_height}">
				<aoEditer ref="page1" :page="pageConfig" class="app" @event="aoedit_event">
					<template v-slot:news_slot>
						
						<view style="background-color: white;">
							<view class="d-flex ai-center jc-between mt-30">
								<view class="gui-grids ">
									<gui-switch-navigation :items="navList" :currentIndex="navIndex" :size="135"
										@change="navchange" textAlign="center" activeDirection="center"
										activeLineBg="linear-gradient(to right, #fff, #fff)" activeColor="#313131"
										color="#000000" activeLineHeight="6rpx" lineHeight="50rpx"
										activeLineWidth="66rpx" :width="600"></gui-switch-navigation>
								</view>
								<text @click="showPdTc()" class="gui-icons fs-50 mx-30">&#xe614;</text>
							</view>
						</view>
					</template>
				</aoEditer>
			</scroll-view>

			<view v-show="showTc" class="gui-shade-in bg-white w-100 pos-fixed"
				style="top: 0;left: 0;z-index: 999;height: 100%;overflow-y: scroll;">
				<view class="gui-icons fs-40 text-right pt-80 pb-40 px-50 w-100 pos-absolute bg-white"
					style="top: 0;right: 0;"><text @click="closeSet">&#xe7a5;</text></view>
				<view style="height: 180rpx;"></view>
				<view class="px-30 mb-30">
					<view>
						<text class="font-bold fs-36 mr-20">我的频道
						</text>
						<text class="text-grey-99 fs-28">长按可拖动顺序</text>
					</view>
				</view>
				<view class="d-flex flex-wrap mx-20">
					<cdt-draggrable-sort v-model="myList" :v-bind:id="isEdit ? 0 : 1" @start="start" @change="change"
						item-class="tag-list-list" active-item-class="tag-list-list-acitive">
						<template slot-scope="{row,index}">
							<view
								class="w120 mx-10 bg-grey-faf9 text-black-33 d-flex ai-center jc-center fs-28 mb-30 pos-relative"
								style="padding: 25rpx 17rpx;border: 1rpx solid #52B6CE;">
								{{row.name}}
								<!-- <image @tap="dels(row,index)" src="/static/image/tc_btn_del.png" class="w40 h40 pos-absolute" style="right: -18rpx;top: -18rpx;"></image> -->
								<text @tap="dels(row,index)" class="pos-absolute gui-icons"
									style="right: -18rpx;top: -18rpx;">&#xe602;</text>
							</view>
						</template>
					</cdt-draggrable-sort>
				</view>
				<view class="px-30 my-30">
					<view><text class="font-bold fs-36 mr-20">更多频道</text><text
							class="text-grey-99 fs-28">点击添加到我的频道</text></view>
				</view>
				<view class="d-flex flex-wrap mx-20">
					<view @click="adds(item,index)" v-for="(item,index) in allList" :key="index"
						class="w-20 mx-10 bg-grey-faf9 d-flex ai-center jc-center text-black-33 fs-28 mb-30"
						style="padding: 25rpx 7rpx;">
						+ {{item.name}}
					</view>
				</view>
				<view class="mt-100 px-20">
					<button type="default" class="gui-btn" @click="closeSet">关闭</button>
				</view>
			</view>
			<view>
				
			</view>
		</template>
	</gui-page>
</template>
<script>
	import cdtDraggrableSort from "@/components/cdt-draggrable-sort/cdt-draggrable-sort.vue"
	import aoEditer from '@/components/common/aoEditer.vue'
	import Head from '@/components/index/Head.vue'
	import {nextTick} from "vue";
	export default {
		components: {
			aoEditer,
			Head
		},
		data() {
			return {
				head_height:"-100rpx",
				isEdit: false,
				navList: [],
				pageConfig: null,
				componentlist: [],
				head_back: "",
				showPopup: false,
				newslist: [],
				swiperItems: [],
				isback: false,
				myList: [],
				showTc: false,
				navIndex: 0,
				allList: [],
				debug:false
			}
		},
		beforeCreate() {
			
		},
		onLoad(opt) {
			this.pageConfig=uni.getStorageSync("page_首页");
			// console.log("index.onLoad",this.pageConfig)
			console.log("pageConfig", this.pageConfig);
			if (!opt.hasOwnProperty("back")) {
				this.isback = false;
			} else {
				this.isback = true;
			}
			if(opt.hasOwnProperty("d")){
				this.debug=true;
				this.update_page();
			}
			
		},
		created() {
			
			
			//this.get_Indexdata();
			if (this.isback) {
				this.set_indexData();
			} else {
				this.get_Indexdata();
				let self = this;
				setTimeout(()=>{
					self.update_page();
				},3000);
			}
		},

		onPageScroll(e) {
			
			if (e.scrollTop > 10) {
				this.head_back = "background-color:white";
			} else {
				this.head_back = "";
			}
		},
		
		methods: {
			aoedit_event(e){
				console.log("index.aoedit_event",e);
				switch(e.type){
					case "storenotecard":
						this.storenotecard_event(e.event)
						break;
				}
			},
			storenotecard_event(e){
				if(e.type=="category_change"){
					this.get_news(e.value);
				}
			},
			
			

			navchange(index) {
				this.navIndex = index;
				this.newslist = [];
				this.get_news(this.navList[index].id);
			},

			get_news(id) {
				let self = this;
				let parm={};
				if(id){
					parm["category_id"]=id;
				}
				this.$boya.NGet("/lgzhsys/news", parm, function(res) {
					console.log(res);
					self.news(res.data.data);
				});
			},

			init_tabs() {
				let d = uni.getStorageSync("tabsConfig");
				let tabStyle = d.component[0].setStyle;
				uni.setTabBarStyle({
					selectedColor: tabStyle.activeColor,
					color: tabStyle.inactiveColor
				});
				for (let i = 0; i < tabStyle.iconList.length; i++) {
					let ic = tabStyle.iconList[i];
					uni.setTabBarItem({
						index: i,
						text: ic.iconText,
						iconPath: ic.iconPic,
						selectedIconPath: ic.inactive,
						pagePath: ic.http.externalLink,
						success(res) {
							console.log("setTabBarItem", res)
						},
						fail(err) {
							console.log("setTabBarItem->error", err)
						}
					});

				}

			},
			update_page() {
				let self = this;
				
				this.$comm.get_appPages(function(res) {
					console.log("update_page",res);
					
					self.pageConfig=res;
					self.$refs.page1.setPageConfig(res);
					uni.setStorageSync("pages_首页",res);
					
					self.set_indexData();
					if(self.debug){
						
						uni.showToast({
							title:"更新完毕",
							icon:"none"
						})
					}
					
					
					
				}, false,"首页");
			},
			init_pages(fnc) {
				let d = uni.getStorageSync("pages_首页");
				console.log("pages_首页", d);
				this.get_Indexdata();
			},
			get_Indexdata() {
				let self = this;
				this.$boya.NGet("/lgzhsys/index", null, (res) => {
					console.log("lgzhsys-index", res);
					uni.setStorageSync("index_data", res.data);

					self.set_indexData(res.data);
				}, null, {
					showLoading: false
				})
			},
			set_indexData(data = null) {
				if (data == null) {
					data = uni.getStorageSync("index_data");
				}
				console.log("set_indexData", data);
				this.$nextTick(function() {
					this.newslist = [];
					this.category_news(data.category);
					this.news(data.news);
					this.swiper(data.swiper);
					this.notice(data.notice);
					this.sleep_data();

				})
			},
			scrolltoupper(e) {
				console.log("scrolltoupper", e)
				this.head_back = "";
			},
			scroll(e) {
				// console.log("scroll",e);
				if (e.detail.deltaY < -0.1) {
					this.head_back = "background-color:white";
					// console.log("scroll",e);
				}
			},
			showPopup1() {
				this.showPopup = true
				// console.log('--12-1-')
			},

			sleep_data() {

			},
			category_news(res) {
				console.log("category_news",res)
				let arr=[];
				
				this.$refs.page1.setData("articleList", res,"categorys");
				
				// console.log("category_news", this.navList, this.allList);
			},
			notice(res) {
				let arr = [];
				for (let key in res) {
					// { title: "lesscode.work - 精品 IT 课程中心", url: "../index/index", opentype: "switchTab"}
					let item = res[key];
					arr.push({
						title: item.title,
						url: '/pages/home/notice/index?id=' + item.id,
						opentype: "navigate"
					})
				}
				this.$nextTick(() => {
					let gg = this.$refs.page1.get_ref("gg");
					if (gg) {
						gg.items = arr;
					}
				})

			},
			news(res) {

				let list=[];
				res.map((item, index) => {
					let ditem = {
						src: this.$uimg + item.fid,
						text: item.title,
						linktype: 10,
						reads: item.look_num,
						likes: item.is_relay,
						http: {
							externalLink: "#/pages/news/newsDetail?id=" + item.id
						}
					};
					list.push(ditem);
				})
				this.newslist=list;

				this.$refs.page1.setData("articleList", this.newslist);
				this.$refs.page1.update_ref("articleList");

			},
			swiper(res) {
				console.log("swiper", res);
				this.swiperItems = [];
				this.swiperData = res;
				for (let key in res) {
					let item = res[key];
					let uimg = JSON.parse(item.index_url_app);
					this.swiperItems.push({
						src: this.$uimg + uimg.id,
						text: item.title,
						linktype: "10",
						http: {
							externalLink: "#/pages/news/newsDetail?id=" + item.link
						}
					})

				}
				console.log("swiperItems", this.swiperItems);
				this.$refs.page1.setData("lbt", this.swiperItems);
			},

			newsInfo(res) {
				//新闻资讯
				let data = {
					page: 1,
					pageSize: 5,
					type: 1
				}
				let self = this;
				this.$lg.Post("/APP/newsInfo/queryPage", data, function(res) {
					let list = [];
					res.data.rows.map((item, index) => {
						let ditem = {
							src: self.$uimg + item.fid,
							text: item.title,
							linktype: 5,
							reads: item.lookNum,
							likes: item.isScore,
							http: {
								externalLink: "#/pages/news/newsDetail?id=" + item.id
							}
						};
						list.push(ditem);
					})
					console.log("newsInfo", list);
					// self.$refs.page1.setData("articleList",list);
					// })
				});
			},
			load_swiper() {
				//轮播图
				let self = this;
				let swipers = [];
				this.$lg.Get("/APP/loop/query", {}, function(res) {
					//self.swiperData = res.data;
					for (let key in res.data) {
						let item = res.data[key];
						let uimg = JSON.parse(item.indexUrlApp);
						swipers.push({
							src: self.$uimg + uimg.id,
							text: item.title,
							linktype: "10",
							http: {
								externalLink: "#/pages/newsDetail?id=" + item.id
							}
						})

					}
					console.log("loop", swipers);
					// 		self.$refs.page1.setData("lbt",self.swiperItems);
					//console.log("swiperItems", self.swiperItems);
				})
			},

			noticeInfo() {
				//通知公告
				let data = {
					page: 1,
					pageSize: 5
				}
				let self = this;
				this.$lg.Post("/APP/noticeInfo/queryPage", data, function(res) {
					console.log('公告res: ', err);
					let arr = [];
					for (let key in res.data.rows) {
						// { title: "lesscode.work - 精品 IT 课程中心", url: "../index/index", opentype: "switchTab"}
						let item = res.data.rows[key];
						arr.push({
							title: item.title,
							url: '/pages/home/notice/index?id=' + item.id,
							opentype: "navigate"
						})
					}
					let gg = self.$refs.page1.get_ref("gg");
					gg.items = arr;
					//self.speakerMsgs = res.data.rows;
					// for (let key in self.speakerMsgs) {
					// 	self.speakerMsgs[key].opentype = "navigate";
					// 	self.speakerMsgs[key].url = "/pages/home/notice/notice?id=" + self.speakerMsgs[key].id;
					// }
					// console.log("speakerMsgs", self.speakerMsgs);
				}, err => {
					console.log('公告err: ', err);
				}, false, false)
			},

			page_style() {
				let _style = this.page.templateJson.Style;
				if (this.page.templateJson.bgColor != "") {
					_style.backgroundColor = this.page.templateJson.bgColor
				}
				if (this.page.templateJson.bgImg != "") {
					_style.backgroundImage = "url(" + this.page.templateJson.bgImg + ")"
				}
				return _style;
			},
			search(e) {
				console.log("search", e);
				uni.navigateTo({
					url: "/pages/comm/search?t=" + e
				});
			}
		}
	}
</script>
<style>
	.app {
		position: relative;
		height: 100vh;
		/* overflow-y: scroll; */
	}

	.head {
		height: calc(var(--status-bar-height)+70rpx);
		z-index: 99999;

		width: 100%;
		position: fixed;
		top: var(--window-top);
		padding-top: var(--status-bar-height);
		padding-left: 20rpx;
		padding-right: 140rpx;
		padding-bottom: 10rpx;
		align-items: center;
	}
	
</style>